<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_749785_du54h857okn.css" />
		<link rel="stylesheet" type="text/css" href="css/public.css" />
		<!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
		<link rel="stylesheet" type="text/css" href="iCheck/blue.css" />
		<link rel="stylesheet" href="css/baoxian.css" />
		<title>保险</title>
	</head>

	<body style="background: #e9ecf3;">
		<!--top-->
		<div class="baoxianP-top">
			<a href="javascript:history.go(-1)"><i class="iconfont icon-fanhui"></i></a>学车保险投保</div>
		<!--cont-->
		<div class="baoxianP-content">
			<div class="baoxianP-items">
				<p class="baoxianP-items-title">基本信息</p>
				<ul>
					<li class="baoxianP-items-item">
						<label class="baoxianP-items-L">姓名</label>
						<input class="baoxianP-items-R" id="name" type="text" value="林晓峰" />
					</li>
					<li class="baoxianP-items-item">
						<label class="baoxianP-items-L">性别</label>
						<span class="checkbox i-checks baoxianP-items-R">
		                	<label class="bxiu-checkbox"><input type="radio" value="" name="icheck" checked=""> 男</label>
		                	<label class="bxiu-checkbox"><input type="radio" value="" name="icheck"> 女</label>
		                </span>
					</li>
					<li class="baoxianP-items-item">
						<label class="baoxianP-items-L">身份证号码</label>
						<input class="baoxianP-items-R long" id="idCard" type="number" value="152801198547896557" />
					</li>
					<li class="baoxianP-items-item">
						<label class="baoxianP-items-L">手机号码</label>
						<input class="baoxianP-items-R long" id="tel" type="number" value="13848956275" />
					</li>
					<li class="baoxianP-items-item">
						<label class="baoxianP-items-L">驾校名称</label>
						<select class="baoxianP-items-R">
							<option value="包头市腾飞驾校">包头市腾飞驾校</option>
						</select>
					</li>
				</ul>
			</div>
			<div class="baoxianP-items">
				<p class="baoxianP-items-title">账号信息<span class="baoxianP-items-title-sm">[投保验证使用]</span></p>
				<ul>
					<li class="baoxianP-items-item">
						<label class="baoxianP-items-L">12123账号</label>
						<input class="baoxianP-items-R long" type="number" id="user" value="sn15896855" />
					</li>
					<li class="baoxianP-items-item">
						<label class="baoxianP-items-L">12123密码</label>
						<input class="baoxianP-items-R long" type="text" id="psd" value="66985684" />
					</li>
				</ul>
			</div>
			<div class="baoxianP-items">
				<p class="baoxianP-items-title">身份证照片</p>
				<div class="card-cont">
					<div class="idcard">
						<div class="lccid">
							<img id="idImg1" src="" / class="img">
							<input type="file" class="file" placeholder="ICCID" accept="image/*">
						</div>
						<p class="card-cont-tips"><i class="iconfont icon-zhuyi"></i>身份证正面</p>
						<div class="card-cont-upload-btn">上 传</div>
					</div>
					<div class="idcard">
						<div class="lccid2">
							<img id="idImg2" src="" / class="img">
							<input type="file" class="file" placeholder="ICCID" accept="image/*">
						</div>
						<p class="card-cont-tips"><i class="iconfont icon-zhuyi"></i>身份证背面</p>
						<div class="card-cont-upload-btn">上 传</div>
					</div>
				</div>
			</div>
			<div class="checkbox i-checks baoxianP-agree">
				<label class="bxiu-checkbox"><input type="checkbox" value="" name="icheck" checked=""> &nbsp;&nbsp;&nbsp;我已同意《机动车驾驶培训学员意外伤害保险条款》</label>
			</div>
		</div>
		<!--bottom-->
		<div class="baoxianP-bottom" onclick="submit()"><i class="iconfont icon-dizhi4"></i>一键投保</div>
		<!--pop-->
		<div class="pop-shadow"></div>
		<div class="baoxian-read">
			<p class="baoxian-read-title">投保须知</p>
			<p class="baoxian-read-text">1、投保期间：本产品于客户投保并支付保险费后3个工作日内生效，保险期间为1年。</p>
			<p class="baoxian-read-text">2、限购份数：1份</p>
			<p class="baoxian-read-text">3、购买前请阅读保险条款，并特别就条款中有关责任免除和投保人、被保险人义务的内容进行详细了解，确认接受条款的全部内容。  </p>
			<p class="baoxian-read-text">4、理赔指引：<br />
    直接拨打24小时客服服务热线95519或40086-95519，由理赔专员全程协助完成理赔。</p>
			<p class="baoxian-read-text">5、投保人的如实告知义务，以及违反义务的后果：
1）订立保险合同，保险人就被保险人的有关情况提出询问的，投保人应当如实告知。投保人故意或者因重大过失未履行前款规定的义务，足以影响保险人决定是否同意承保或者提高保险费率的，保险人有权解除本保险合同。
2）投保人故意不履行如实告知义务的，保险人对于保险合同解除前发生的保险事故，不承担给付保险金责任，并不退还保险费。
3）投保人因重大过失未履行如实告知义务，对保险事故的发生有严重影响的，保险人以于保险合同解除前发生的保险事故，不承担给付保险金责任，但应当退还保险费。
4）投保人、被保险人或者受益人知道保险事故发生后，应当及时通知保险人。故意或者因重大过失未及时通知，致使保险事故的性质、原因、损失程度等难以确定的，保险人对无法确定的部分，不承担给付保险金责任，但保险人通过其他途径已经及时知道或者应当及时知道保险事故发生的除外。</p>
			<p class="baoxian-read-text">6、上述约定不包括因不可抗力而导致的迟延。<br />
我公司建立有强大的防火墙和信息安全系统，针对投保人（被保险人或者受益人）的个人信息、投保交易信息和资金信息等给予充足的安全保障，我们严格遵守现行的关于个人信息、数据及隐私保护的法律法规，采取充分的技术手段和制度管理，保护您提供给我们的个人信息、数据和隐私不受到非法的泄露或披露给未获授权的第三方。
您在购买产品过程中，如发现本公司有关人员有违法、违规行为，或认为自身权益受到侵犯，请您保留相关证据并向本公司投诉，投诉电话：95519或40086-95519。</p>
			<p class="baoxian-read-text">7、同意授权小鹿学车获取个人信息仅限投保使用。</p>
			<div class="baoxian-read-btn">同 意</div>
		</div>
	</body>
	<!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
	<script src="js/jquery.min.js"></script>
	<script src="js/iCheck/icheck.min.js"></script>
	<script src="layer/layer.js"></script>
	<script type="text/javascript">
		// submit
		function submit(){
			var RegExp = /^((0\d{2,3}-\d{7,8})|(1[35847]\d{9}))$/; //验证手机格式
			var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X 
			if($("#name").val().trim() == ''){
				layer.msg("请输入姓名")
			} else if($("#idCard").val().trim() == ''){
				layer.msg("请输入身份证号")
			} else if($("#tel").val().trim() == ''){
				layer.msg("请输入手机号")
			} else if($("#user").val().trim() == ''){
				layer.msg("请输入账号")
			} else if($("#psd").val().trim() == ''){
				layer.msg("请输入密码")
			} else if($("#idImg1").attr("src") == '' || $("#idImg2").attr("src") == ''){
				layer.msg("请上传身份证正反俩面")
			} else{
				if(RegExp.test($("#tel").val().trim()) == false) {
					layer.msg('请输入正确手机号码')
				} else if(reg.test($("#idCard").val().trim()) == false){
					layer.msg('请输入正确身份证号')
				}else{
					// 此处放提交的逻辑代码
					console.log("验证通过")
				}
			}
		}
		$(document).ready(function() {
			// 此js为页面初始化时候通过判断学员是否上传过照片来调用，如果上传过则调用一下即可，没有上传过的话就不需要调用
//			$(".lccid").addClass("on")
//			$(".lccid2").addClass("on")

			//read
			$('body').css('overflow','hidden');//浮层出现时窗口不能滚动设置
			$(".pop-shadow").height($(window).height())
			$(".baoxian-read").height($(window).height()-60)
			$(".baoxian-read-btn").click(function(){
				$(".baoxian-read").hide()
				$(".pop-shadow").hide()
				$('body').css('overflow','auto');//浮层消失时窗口能滚动设置
			})
			// icheck
			$(".i-checks").iCheck({
				checkboxClass: "icheckbox_square-blue",
				radioClass: "iradio_square-blue",
			})

			//upload
			$(".lccid").on("change", "input[type=file]", function() {
				$(this).prev().css("opacity", "1")

				var filePath = $(this).val(); //读取图片路径

				var fr = new FileReader(); //创建new FileReader()对象
				var imgObj = this.files[0]; //获取图片

				fr.readAsDataURL(imgObj); //将图片读取为DataURL
				var obj = $(this).prev()[0]; //

				if(filePath.indexOf("jpg") != -1 || filePath.indexOf("JPG") != -1 || filePath.indexOf("PNG") != -1 || filePath.indexOf("png") != -1) {
					var arr = filePath.split('\\');
					var fileName = arr[arr.length - 1];

					$(this).parent().next().show();
					fr.onload = function() {
						obj.src = this.result;
					};
				} else {
					$(this).parent().next().show();
					$(this).parent().next().children("i").html("您未上传文件，或者您上传文件类型有误！").css("color", "red");
					//$(this).parent().next().html("您未上传文件，或者您上传文件类型有误！").css("color","red");
					return false
				}
			});

			$(".lccid2").on("change", "input[type=file]", function() {
				$(this).prev().css("opacity", "1")

				var filePath = $(this).val(); //读取图片路径

				var fr = new FileReader(); //创建new FileReader()对象
				var imgObj = this.files[0]; //获取图片

				fr.readAsDataURL(imgObj); //将图片读取为DataURL
				var obj = $(this).prev()[0]; //

				if(filePath.indexOf("jpg") != -1 || filePath.indexOf("JPG") != -1 || filePath.indexOf("PNG") != -1 || filePath.indexOf("png") != -1) {
					var arr = filePath.split('\\');
					var fileName = arr[arr.length - 1];

					$(this).parent().next().show();
					fr.onload = function() {
						obj.src = this.result;
					};
				} else {
					$(this).parent().next().show();
					$(this).parent().next().children("i").html("您未上传文件，或者您上传文件类型有误！").css("color", "red");
					//$(this).parent().next().html("您未上传文件，或者您上传文件类型有误！").css("color","red");
					return false
				}
			});

		});
	</script>

</html>